<template>
  <SearchBar @query="query"></SearchBar>
  <TableList :data="tableList" :pagination="pagination"></TableList>

</template>
<script setup lang="js">
import { ref, onMounted } from 'vue'
import TableList from './components/TableList.vue';
import { listReservation } from '@/api/reservation_api';
import SearchBar from './components/SearchBar.vue';
const tableList = ref([])
const pagination = ref({})
const params = ref({
  page: 1,
  pageSize: 10,
  name: '',
  startTime: '',
  endTime: '',
  timeType: '', // before：传递endTime，after：传递startTime，between是两个时间都必须传递
})

onMounted(() => {
  loadTableData(params.value)
})

const loadTableData = async (obj) => {
  let resp = await listReservation(obj)
  tableList.value = resp.records

  pagination.value.total = resp.total
  pagination.value.current = resp.page
}

const query = (obj) => {

  params.value = obj
  params.value.page = 1

  if (obj.startTime && obj.endTime) {
    params.value.timeType = 'between'
  } else if (obj.startTime) {
    params.value.timeType = 'after'
  } else if (obj.endTime) {
    params.value.timeType = 'before'
  }

  loadTableData(params.value)

}

</script>